<template>
  <div>
    <div v-show="tableData.length == 0" class="zanwu">{{ $t("m.NoData") }}</div>
    <div v-show="!tableData.length == 0" class="anmesd AccountTableCenter">
      <el-table
        @row-click="cellClicks"
        @row-contextmenu="contextmenu"
        :max-height="heightList"
        :data="tableData"
        style="width: 100%"
        class="tableAuto"
      >
        <el-table-column width="150px" :label="$t('quotation.left_list.56hzdc682d00')" fixed="left">
          <template slot-scope="scope">
            <div class="first_table">
              <h2>{{ scope.row.name }}</h2>
              <p class="f-cb">
                <img
                  class="type_icon"
                  :src="
                    scope.row.market == 'HKEX'
                      ? HKicon
                      : scope.row.market == 'US'
                      ? USicon
                      : scope.row.market == 'SSE'
                      ? SHicon
                      : SZicon
                  "
                  alt=""
                />{{ scope.row.symbol }}
              </p>
            </div>
          </template>
        </el-table-column>
        <!-- 总量 -->
        <el-table-column min-width="100px" :label="$t('table.current_position.56hznbyp1no0')" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalNum | formatNumberRgx }}
          </template>
        </el-table-column>
        <!-- 可用 -->
        <el-table-column min-width="100px" :label="$t('table.current_position.56hznbyp2vg0')" align="center">
          <template slot-scope="scope">
            {{ scope.row.ableNum | formatNumberRgx}}
          </template>
        </el-table-column>
        <!-- 现价 -->
        <el-table-column min-width="90px" :label="$t('table.current_position.56hznbyp3300')" align="center">
          <template slot-scope="scope">
            <div class="center_atble">
              {{ Number(scope.row.latestPrice) | toFixed(scope.row.precision) }}
            </div>
          </template>
        </el-table-column>
        <!-- 成本 -->
        <el-table-column min-width="100px" :label="$t('table.current_position.56hznbyp3940')" align="center">
          <template slot-scope="scope">
            {{ scope.row.costPrice | toFixed(3) }}
          </template>
        </el-table-column>
        <!-- 市值 -->
        <el-table-column min-width="120px" :label="$t('table.current_position.56hznbyp3e00')" align="center">
          <template slot-scope="scope">
            <span v-if="closeOpen">
              {{ Number(scope.row.marketValue).toFixed(3) | formatNumberRgx}}
            </span>
            <span v-else>*****</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120px" :label="$t('table.current_position.56hznbyp3iw0')" align="center">
          <template slot-scope="scope">
            <div
              v-if="closeOpen"
              :class="
                scope.row.profit > 0
                  ? 'red'
                  : scope.row.profit < 0
                  ? 'green'
                  : ''
              "
            >
              {{ Number(scope.row.profit) > 0 ? "+" : ""
              }}<span v-if="scope.row.profit">{{ Number(scope.row.profit).toFixed(2) | formatNumberRgx}}</span>
              <span v-else>0</span>
            </div>
            <div v-else>*****</div>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" :label="$t('table.current_position.56hznbyp3q40')" align="center">
          <template slot-scope="scope">
            <div
              v-if="closeOpen"
              :class="
                scope.row.profit > 0
                  ? 'red'
                  : scope.row.profit < 0
                  ? 'green'
                  : ''
              "
            >
              {{ Number(scope.row.profitRate) > 0 ? "+" : ""
              }}{{
                scope.row.profitRate
                  ? (scope.row.profitRate * 100).toFixed(2)
                  : 0
              }}%
            </div>
            <div v-else>*****</div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '180px' : '120px'" align="center">
          <template slot="header">
            {{$t('table.current_position.56hznbyp3y40')}}
            <span
              class="FinancDescription"
              @click="FinancDescriptionClick"
            ></span>
          </template>
          <template slot-scope="scope" class="">
            <!-- 支持融资 -->
            <el-tooltip
              class="item"
              effect="dark"
              placement="right-start"
              v-if="scope.row.isFinance == 1"
              popper-class="isFinance"
            >
                <div slot="content">
                  <!-- 存在融资金额 -->
                   <span v-if="scope.row.tradeFinance">{{$t('table.current_commission.56hzdwf0dqk0')}}{{Number(scope.row.tradeFinance).toFixed(2)| formatNumberRgx}}</span>
                   <span v-else>{{$t('table.current_commission.56hzkqf0dc40')}}</span>
                 </div>
              <span class="yesFinan">{{$t('table.current_position.56hznbyp42o0')}}</span>
            </el-tooltip>
            <!-- 支持融券 -->
            <el-tooltip
              class="item"
              effect="dark"
              placement="right-start"
              v-if="scope.row.isMargin == 1"
              popper-class="isFinance"
            >
            <div slot="content">
                   <span v-if="scope.row.totalNum">{{$t('table.current_commission.56hzsfsweqk0')}}{{Math.abs(Number(scope.row.totalNum)) | formatNumberRgx}}</span>
                   <span v-else>{{$t('table.current_commission.56hzkqf0dcs0')}}</span>
                 </div>
              <span class="yesFinan">{{$t('table.current_position.56hznbyp42o0')}}</span>
            </el-tooltip>
            <!-- 不支持融资融券 -->
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('table.current_position.56hznbyp46o0')"
              placement="right-start"
              v-if="scope.row.isMargin == 0 && scope.row.isFinance == 0"
              popper-class="isFinance"
            >
              <span class="yesFinan">{{$t('table.current_position.56hznbyp4b00')}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '180px' : '120px'" :label="$t('table.current_position.56hznbyp4gc0')" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.isMargin == 0 && scope.row.isFinance == 0">
              --
            </div>
            <div v-else>
              <span v-if="scope.row.unsettledInterest">{{ Number(scope.row.unsettledInterest).toFixed(2) | formatNumberRgx}}</span> <span v-else>0</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '140px' : '100px'"
          :label="$t('table.current_position.56hznbyp4k80')"
          align="center"
          v-if="type"
        >
          <template slot-scope="scope">
            <div>
              {{
                scope.row.market == "HKEX"
                  ? "HKD"
                  : scope.row.market == "US"
                  ? "USD"
                  : "CNH"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="180px"
          :label="$t('table.current_position.56hznbyp4ug0')"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="btns-box">
              <button
                class="small-blur"
                v-if="JSON.stringify(scope.row.splitsRecord) != '[]'"
                @click="splitsRecordClick(scope.row.splitsRecord)"
              >
                {{$t('table.current_position.56hznbyp4xs0')}}
              </button>
              <button @click="editForm(scope.row, 0)" class="small-red">
                {{$t('table.current_position.56hznbyp50k0')}}
              </button>
              <button @click="editForm(scope.row, 1)" class="small-green">
                {{$t('table.current_position.56hznbyp53c0')}}
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        :visible.sync="drawer"
        direction="rtl"
        custom-class="drawer"
        size="380px"
        :close-on-press-escape="false"
        :wrapperClosable="false"
        :show-close="false"
        v-if="drawer"
        :before-close="beforeClose"
      >
        <BusinessDialog
          :tradeDirection="tradeDirection"
          @hideTrade="hideTrade"
        ></BusinessDialog>
      </el-drawer>
    </div>
    <Company
      :ListData="listdata"
      :show="companyShow"
      @closeCompany="closeCompany"
    ></Company>
  </div>
</template>
<script>
import BusinessDialog from "@/components/account/right/BusinessDialog";
import Company from "@/components/account/table/Company.vue";
export default {
  components: {
    Company,
    BusinessDialog,
  },
  props: ["tableData", "type"],
  data() {
    return {
      heightList: null,
      listdata: {},
      companyShow: false,
      drawer: false, // 打开抽屉的条件
      tradeDirection: 0, // 判断进入买入，卖出的交易窗口1:买入，2卖出
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
      lang: "",
    };
  },
  mounted() {
    var _this = this;
    _this.$nextTick(function () {
      if (_this.tableData.length !== 0) {
        _this.heightList =
          $(window).height() - $(".tableAuto").offset().top - 44;
      }
    });
    _this.lang = localStorage.getItem("lang");
  },
  methods: {
    FinancDescriptionClick() {
      this.$emit("DescriptionOpen");
    },
    hideTrade() {
      this.drawer = false;
    },
    cellClicks(row) {
      this.$store.dispatch("SetStockData", {
        symbol: row.symbol,
        securityType: row.securityType,
        market: row.market,
      });
    },
    contextmenu(row, column, event) {
      //右点击事件
      console.log(row);
      console.log(column);
      console.log(event);
    },
    splitsRecordClick(list) {
      this.companyShow = true;
      this.listdata = list;
      console.log(this.listdata, "11111");
    },
    closeCompany() {
      this.companyShow = false;
      this.listdata = {};
    },
    beforeClose(done) {
      done();
      $(".indivIndex").removeClass("on");
    },
    // 打开改单交易抽屉
    async editForm(item, i) {
      // 判断进入买入，卖出的交易窗口1:买入，2卖出
      this.tradeDirection = i;
      setTimeout(() => {
        this.drawer = true;
      }, 1200);
    },
  },
  watch: {
    tableData(val, old) {
      this.$nextTick(function () {
        this.heightList =
          $(window).height() - $(".tableAuto").offset().top - 44;
      });
    },
  },
  computed: {
    closeOpen() {
      return this.$store.state.index.closeOpen;
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/table.less";
.yesFinan {
  color: @hoverColor;
  cursor: pointer;
}
.tableAuto {
  cursor: pointer;
}
.FinancDescription {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-left: 3px;
  cursor: pointer;
  background: url(~@/assets/img/icon_bbxxh.png) no-repeat center;
  background-size: 100% auto;
  position: relative;
  top: 2px;
}
.el-table {
  .el-table__fixed {
    bottom: 8px !important;
  }
  .el-table__fixed-right {
    bottom: 8px !important;
  }
}
</style>